<template>
  <div>
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column label="属性" width="400px">
        <template v-slot="scope">
          <div>
            <strong>{{ scope.row.attribute }}</strong>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="数值">
        <template v-slot="scope">
          <div>{{ scope.row.value }}</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from "axios";
import { loadConfig } from "@/utils/config";

export default {
  props: {
    name: {
      type: String,
      default: () => ({}),
    },
    data: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      tableData: [], // 存储从后端获取的数据
      nodeData: [],
      intervalId: null, // 定时器 ID
    };
  },
  mounted() {
    this.intervalId = setInterval(() => {
      this.fetchData();
    }, 2000);
  },
  beforeUnmount() {
    // 清除定时器以防内存泄漏
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }
  },
  methods: {
    async fetchData() {
      const config = await loadConfig();
      const apiUrl = config.apiUrl;
      axios
        .get(`${apiUrl}/get_nf_data?nf=${this.name}`)
        .then((response) => {
          this.tableData = this.formatData(response.data);
        })
        .catch((error) => {
          console.error("Error fetching data:", error);
        });
    },
    formatData(data) {
      const bussness1 = this.name.replace('-', '') + '_prediction_1';
      const bussness2 = this.name.replace('-', '') + '_prediction_2';
      // let bussness1 = 0;
      // let bussness2 = 0;
      // if (this.name === "upf-1" || this.name === "upf-2") {
      //   bussness1 = 2700 + Math.floor(Math.random() * 100);
      //   bussness2 = Math.floor(Math.random() * 100);
      // }
      // if (this.data.strategy_path[0] == this.name[4] || this.data.strategy_path[1] == this.name[4]) {
      //   console.log(this.data.strategy_path, this.name);
      //   bussness1 = 3000 + Math.floor(Math.random() * 100);
      //   bussness2 = Math.floor(Math.random() * 100);
      // }

      return [
        { attribute: "网元名称", value: this.name },
        { attribute: "CPU使用量(m)", value: data.phy_cpu_list[data.phy_cpu_list.length - 1] },
        { attribute: "GPU使用量(Mi)", value: data.gpu_list[data.gpu_list.length - 1] },
        { attribute: "GPU使用率(%)", value: data.gpu_rate[data.gpu_rate.length - 1] },
        { attribute: "内存使用量(Mi)", value: data.phy_mem_list[data.phy_mem_list.length - 1] },
        { attribute: "磁盘读取量(kB)", value: data.disk_read[data.disk_read.length - 1] },
        { attribute: "磁盘写入量(kB)", value: data.disk_write[data.disk_write.length - 1] },
        { attribute: "输入速度(Mb/s)", value: data.net_io_list[data.net_io_list.length - 1] === 0 ? 0 : data.net_io_list[data.net_io_list.length - 1].toFixed(3) },
        { attribute: "输出速度(Mb/s)", value: data.net_io_list[data.net_io_list.length - 1] === 0 ? 0 : data.net_io_list[data.net_io_list.length - 1].toFixed(3) },
        { attribute: '目标检测数据包', value: this.data[bussness1] },
        { attribute: '文件传输数据包', value: this.data[bussness2] },
        // { attribute: "目标检测数据包", value: bussness1 },
        // { attribute: "文件传输数据包", value: bussness2 },
        // { attribute: '执行时间', value: data.ExecutionTime }
      ];
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../table.scss";

.el-table {
  background-color: transparent;
  /* 透明背景 */
  border: none;
  /* 去除表格的边框 */
}

.el-table th,
.el-table td {
  background-color: transparent !important;
  /* 透明背景 */
  border: none !important;
  /* 去除每个单元格的边框 */
}

.el-table th {
  font-weight: bold;
  color: #333;
  /* 修改表头的字体颜色 */
}

.el-table .el-table__cell {
  padding: 10px 20px;
  /* 为单元格增加内边距 */
  color: #333;
  /* 设置文本颜色 */
}
</style>
